<template>
  <div class="counter-component">
    <h2>计数器</h2>

    <!-- 当前计数值，带有动态样式 -->
    <div :class="{ countClass: res < 0 }">{{ res }}</div>

    <!-- 增加和减少按钮 -->
    <button @click="increase">增加</button>
    <button @click="decrease">减少</button>

    <!-- 插槽内容 -->
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const count = defineProps<{
  initial: number
}>()

const res = ref(count.initial)
// const mite = defineEmits<{
//   (e: 'increase'): void
//   (e: 'decrease'): void
// }>()
const increase = () => {
  //   mite('increase')
  res.value++
}
const decrease = () => {
  //   mite('decrease')
  res.value--
}
const reset = () => {
  res.value = count.initial
}
watch(
  () => res.value,
  (newVal) => {
    console.log(newVal)
  }
)
defineExpose({
  reset
})
</script>

<style lang="scss" scoped>
.counter-component {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.counter-component div {
  font-size: 2em;
  margin-bottom: 20px;
  text-align: center;
  transition: color 0.3s ease;
}

.counter-component button {
  padding: 8px 16px;
  font-size: 16px;
  margin-right: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.counter-component button:hover {
  background-color: #218838;
}

.positive {
  color: green;
}

.negative {
  color: red;
}

.zero {
  color: gray;
}

.countClass {
  color: red;
}
</style>
